<script type="text/javascript">
/* <![CDATA[ */ 
//Global Variables
var isDataLoaded = false;
var userId = '[##_USER_ID_##]';

$(document).ready(function(){
    [##_AJAX_FUNCTION_##]
});


function getFriendHistoryAJAX($id){
	$('#loading-box').html("Loading friendship history data. Please wait.").show();

	if ($.data(document.body, 'history') != null) {
            $('#loading-box').hide();

            //Build Friend Table
            buildHistoryTable(data);
            
            onDataLoaded();
	}
	else {
		$.getJSON('/o-my-friends/ajax/getFriendshipAJAX.php?[##_QUERY_STRING_##]&id=' + $id, null, function(data){
			$('#loading-box').hide();

            //check if there is an error
            if (data.error != null) {
				alert(data.error);
			}
			else {
			
				//store data
				$.data('document.body', 'history', data);
				
				//Build Friend Table
				buildHistoryTable(data);
				
				onDataLoaded();
			}
		});
    }
}

function buildHistoryTable(data){
    var tbody = $('ul.friend_history');

    $(data).each(function(item, act){
		
        var d = new Date();
        d.setTime(act.time*1000);

        var floatClass = null;
        if(act.name == userId){
			floatClass = "me";
		}else{
			floatClass = "friend";
		}
        
        tbody.append("<li id='"+ act.id +"' class='listItem   '>" +
		                "<div class='clearfix'>" +
							"<a class='profilePicLink "+floatClass+"' href=''><img src='http://graph.facebook.com/"+ act.name +"/picture?type=square'/></a>" +
							"<div>"+ 
								"<div class='messageType'>"+ act.type +"</div>" + 
								"<div class='messageBody'>" + act.text + "</div>" +
								"<div class='"+floatClass+" timestamp'>" + d.toString() + "</div>" +
							"</div>"+
						"</div>"+
                    "</li>");
    });
    $('.timestamp').cuteTime();
}


function onDataLoaded(){
    isDataLoaded = true;
}

function onAJAXCallReturn(){
    isDataLoaded = true;
}
/* ]]> */
</script>